<template>
  <div class="centerRight">
    <a-spin :spinning="spinning">
      <a-row :gutter="16" class="configPay">
        <a-col :span="8" v-for="item in payList" :key="item.payTypeParams.id" class="configWrap">
          <a-card
            :bordered="true"
            :title="item.payTypeParams.payTypeName"
            type="inner"
          >
            <a slot="extra" v-if="userInfo.merchantRespParams" @click="visibleShow(item)">
              <a-popover placement="topLeft">
                <template slot="content">
                  <span>金额配置</span>
                </template>
                  <a-icon type="setting" />
              </a-popover>
            </a>
            <p>支付标识: 
              <a-popover placement="topLeft">
                <template slot="content">
                  <span>{{ item.payTypeParams.payTypeFlag }}</span>
                </template>
                  <span class="ellipsi">{{ item.payTypeParams.payTypeFlag }}</span>
              </a-popover>
          </p>
          <p class="ellipsi">备注: 
              <a-popover placement="topLeft">
                <template slot="content">
                  <span>{{ item.payTypeParams.remark }}</span>
                </template>
                  <span>{{ item.payTypeParams.remark }}</span>
              </a-popover>
          </p>
          <p>
            金额类型: <span>{{ switchCharge(item.amountType)}}</span>
          </p>
          <p class="ellipsi">金额: 
            <a-popover v-if="item.amountStr" placement="topLeft">
                <template slot="content">
                  <span v-if="item.amountType === 'FIXED'" class="ellipsi">{{ item.amountStr }}</span>
                  <span v-if="item.amountType === 'RANGE'" class="ellipsi">{{ item.amountStr.split(',').join('-') }}</span>
                  <span v-if="item.amountType === 'MULTIPLE'" class="ellipsi">{{ multipleStyle(item.amountStr)[0]+'-'+multipleStyle(item.amountStr)[2] }} 倍数: {{ multipleStyle(item.amountStr)[1] }}</span>
                </template>
                  <span v-if="item.amountType === 'FIXED'" class="ellipsi">{{ item.amountStr }}</span>
                  <span v-if="item.amountType === 'RANGE'" class="ellipsi">{{ item.amountStr.split(',').join('-') }}</span>
                  <span v-if="item.amountType === 'MULTIPLE'" class="ellipsi">{{ multipleStyle(item.amountStr)[0]+'-'+multipleStyle(item.amountStr)[2] }} 倍数: {{ multipleStyle(item.amountStr)[1] }}</span>
              </a-popover>
            <span v-else>暂无配置</span>
          </p>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
    <a-modal
      :title="title+'金额配置'"
      :closable="false"
      :keyboard="false"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="modalCancel"
    >
      <a-tabs v-model="tabKey" @change="tabChange">
        <a-tab-pane tab="固码" key="FIXED" class="tabWrap">
      <!--start-------------------------------- <fix-tab /> -->
          <template v-for="(tag, index) in fixedList">
            <a-tooltip v-if="tag.length > 10" :key="index" :title="tag">
              <a-tag
                :key="index"
                closable
                :afterClose="() => handleTagClose(tag)"
              >{{ `${tag.slice(0, 10)}...` }}</a-tag>
            </a-tooltip>
            <a-tag
              v-else
              :key="index"
              closable
              :afterClose="() => handleTagClose(tag)"
            >{{ tag }}</a-tag>
          </template>
          <a-input
            v-if="fixedInputVisible"
            ref="tagInput"
            type="text"
            size="small"
            :style="{ width: '78px' }"
            :value="fixedInputValue"
            @change="handleInputChange"
            @blur="handleTagInputConfirm"
            @keyup.enter="handleTagInputConfirm"
          />
          <a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
            <a-icon type="plus" />新固码
          </a-tag>
          <!--end----------------------------------- <fix-tab /> -->
        </a-tab-pane>
        <a-tab-pane tab="范围" key="RANGE" class="tabWrap">
          <!--start-------------------------------- <range-tab /> -->
          <a-row :gutter="16">
            <a-col :span="10">
              <a-input placeholder="¥" v-model="rangeList.lower" />
            </a-col>
            <a-col :span="2">
              <span :style="{lineHeight: '30px'}">至</span>
            </a-col>
            <a-col :span="10">
              <a-input placeholder="¥" v-model="rangeList.upper" />
            </a-col>
          </a-row>
          <!--end--------------------------------- <range-tab /> -->
        </a-tab-pane>
        <a-tab-pane tab="范围 + 倍数" key="MULTIPLE" class="tabWrap">
          <!--start <multiple-tab /> -->
          <a-row :gutter="16">
            <a-col :span="8">
              <a-input placeholder="¥" v-model="multipleList.lower" />
            </a-col>
            <a-col :span="6">
              <a-input placeholder="倍数" v-model="multipleList.double" />
            </a-col>
            <a-col :span="8">
              <a-input placeholder="¥" v-model="multipleList.upper" />
            </a-col>
          </a-row>
          <!--end <multiple-tab /> -->
        </a-tab-pane>
      </a-tabs>
      <!-- </div> -->
    </a-modal>
  </div>
</template>

<script>
import * as API from "../../../api/center";
import { switchCharge } from "../../../utils/filter";
import { mapState } from "vuex";

export default {
  data() {
    return {
      title: '',
      mcpId: null,
      typeId: null,
      payList: [], // 支付类型集合
      tabKey: "FIXED",
      spinning: false,
      visible: false,
      confirmLoading: false,
      merchantId: null,
      fixedInputValue: "", // 固码输入值
      fixedInputVisible: false, // 固码
      fixedList: [],
      rangeList: {
        lower: null,
        upper: null
      },
      multipleList: {
        lower: null,
        double: null,
        upper: null
      }
    };
  },
  props: {
    channelId: {
      type: Number,
      detail: null
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted() {},
  methods: {
    switchCharge,
    mcpConfigDetailList() {
      // MCP商户通道详情
      this.spinning = true;
      this.merchantId = this.userInfo.merchantRespParams ? this.userInfo.merchantRespParams.id : (this.$route.query.id || null)
      let params = {
        channelId: this.channelId,
        merchantId: this.merchantId
      };
      this.channeDeletelId = null;
      API.mcpConfigDetail(params)
        .then(res => {
          if (res.code === 200) {
            this.payList = res.data.mcpPayTypeParams;
            this.mcpId = res.data.id;
          }
          this.spinning = false;
        })
        .catch(() => {
          this.spinning = false;
        });
    },
    visibleShow(item) {
      this.visible = true;
      this.typeId = item.payTypeParams.id
      this.title = item.payTypeParams.payTypeName
      // let merchantId = this.userInfo.merchantRespParams.id
      this.merchantId = this.userInfo.merchantRespParams ? this.userInfo.merchantRespParams.id : (this.$route.query.id || null)
      API.queryAmount(this.merchantId, this.channelId, this.typeId)
        .then(res => {
          if (res.code === 200) {
            this.tabKey = res.data.amountType || 'FIXED'
            let arr = res.data.amountStr.split(',')
            this.backType(arr)
          }
          this.spinning = false;
        })
        .catch(() => {
          this.spinning = false;
        });
    },
    modalCancel() {
      this.visible = false;
      this.initCharge()
    },
    initCharge() {
      this.fixedList =[]
      this.rangeList.lower = null
      this.rangeList.upper = null
      this.multipleList.lower = null
      this.multipleList.double = null
      this.multipleList.upper = null
    },
    handleOk() {
      this.confirmLoading = true;
      let putBody = {
        amountStr: this.switchType(),
        amountType: this.tabKey
      }
      API.configAmount(this.mcpId, this.typeId, putBody)
        .then(res => {
          if (res.code === 200) {
            this.$message.destroy();
            this.$message.success("操作成功");
            this.mcpConfigDetailList()
            this.visible = false;
            this.initCharge()
          }
          this.confirmLoading = false;
        })
        .catch(() => {
          this.confirmLoading = false;
        });
    },
    tabChange(value) {
      this.tabKey = value;
    },
    switchType () {
      let type = this.tabKey
      let str = ''
      switch (type) {
        case 'FIXED':
          str = this.fixedList.join(',');
          break;
        case 'RANGE':
          str = this.rangeList.lower + ',' + this.rangeList.upper;
          break;
        case 'MULTIPLE':
          str = this.multipleList.lower + ',' + this.multipleList.double + ',' + this.multipleList.upper;
          break;
        default:
          str = this.fixedList.join(',');
      }
      return str
    },
    backType (arr) {
      let type = this.tabKey
      let str = ''
      switch (type) {
        case 'FIXED':
          // str = this.fixedList.join(',');
          this.fixedList = arr[0]?arr:[]
          break;
        case 'RANGE':
          // str = this.rangeList.lower + ',' + this.rangeList.upper;
          this.rangeList.lower = arr[0]
          this.rangeList.upper = arr[1]
          break;
        case 'MULTIPLE':
          // str = this.multipleList.lower + ',' + this.multipleList.double + ',' + this.multipleList.upper;
          this.multipleList.lower = arr[0]
          this.multipleList.double = arr[1]
          this.multipleList.upper = arr[2]
          break;
        default:
          str = this.fixedList.join(',');
      }
      return str
    },
    // ----------------------------------- 固码 start
    showTagInput() {
      this.fixedInputVisible = true;
      this.$nextTick(() => {
        this.$refs.tagInput.focus();
      });
    },
    handleInputChange(e) {
      this.fixedInputValue = e.target.value;
    },

    handleTagInputConfirm() {
      const inputValue = this.fixedInputValue;
      let fixedList = this.fixedList;
      if (inputValue && !fixedList.includes(inputValue)) {
        fixedList = [...fixedList, inputValue];
      }

      Object.assign(this, {
        fixedList,
        fixedInputVisible: false,
        fixedInputValue: ""
      });
    },
    handleTagClose(removeTag) {
      const fixedList = this.fixedList.filter(tag => tag !== removeTag);
      this.fixedList = fixedList;
    },
    // ----------------------------------固码 end
    // MULTIPLE
    multipleStyle(str){
      let _str = str.split(',')
      return _str
    }
  },
  watch: {
    channelId(val) {
      if (val) {
        // console.log(val)
        this.mcpConfigDetailList();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.centerRight {
  .tabWrap{
    min-height: 140px;
    padding-top: 26px;
  }
  .configPay {
    margin-bottom: 25px;
    .configWrap {
      // cursor: pointer;
      margin-bottom: 25px;
    }
  }
  .ant-card-type-inner .ant-card-body {
    padding-right: 12px;
  }
}
</style>
